<script setup>
    import { onMounted } from 'vue'
    import { getCulturalTourismTypeList, getScenicList, getCulturalTourismOtherList } from '@/api/travel'
    import XzMap from './components/XzMap.vue'
    import byIcon from '@/assets/images/card-title-icon-by.png'
    import msIcon from '@/assets/images/card-title-icon-ms.png'
    import gwIcon from '@/assets/images/card-title-icon-gw.png'

    onMounted(() => {
        getTypeList()
        getList()
    })

    // 分类
    let typeData = $ref([])
    let currentTypeIndex = $ref(0)
    const getTypeList = () => {
        getCulturalTourismTypeList().then(res => {
            typeData = res.result
        })
    }
    
    // 获取景点列表
    let resData = $ref([])
    let tourData = $ref([])
    let dataLoading = $ref(false)
    const getList = () => {
        getScenicList().then(res => {
            if(res.success){
                tourData = res.result
                resData = resData.concat(res.result)
                getOtherList()
                // xzMap.init(resData)
            }
        })
    }

    let otherData = $ref([])
    let otherIcon = [byIcon, msIcon, gwIcon]

    // 其他列表
    const getOtherList = async (itemValue) => {
        let data1 = await getCulturalTourismOtherList({ type: 1 })
        resData = resData.concat(data1.result)
        otherData[0] = data1.result
        let data2 = await getCulturalTourismOtherList({ type: 2 })
        resData = resData.concat(data2.result)
        otherData[1] = data2.result
        let data3 = await getCulturalTourismOtherList({ type: 3 })
        resData = resData.concat(data3.result)
        otherData[2] = data3.result
        dataLoading = false
        console.log(resData)
        xzMap.init(resData)

        // getCulturalTourismOtherList({ type: itemValue }).then(res => {
        //     dataLoading = false
        //     if(res.success){
        //         // resData = res.result
        //         // xzMap.init(resData, itemValue)
        //         otherData[itemValue-1] = res.result
        //         xzMap.init(res.result)
        //     }
        // })
    }


    // 点击列表
    let currentIndex = $ref('00')
    const handleClickList = (index, item) => {
        currentIndex = index
        xzMap.setMapCenterPoint(item)
    }

    // 是否折叠
    let isUnfold = $ref(false)

    // 点击折叠
    const handleClickFold = () => {
        isUnfold = !isUnfold
    }

    // 地图
    let xzMap = $ref(null)

</script>

<template>
    <div class="content-main travel-wrap">
        <div class="left-card" :class="{ fold: isUnfold }">
            <div class="village-list">
                <div class="card-title"><img src="../../assets/images/card-title-icon-6.png">{{ typeData.length ? typeData[0].itemText : '' }}</div>

                <el-scrollbar class="list-wrap">
                    <div class="item towns flex-between" @click="handleClickList('00')">
                        <div class="name" :class="{ active: currentIndex == ( 0 + '0' )}">全景预览</div>
                    </div>
                    <div 
                        class="item flex-between"
                        v-for="(item, index) in tourData"
                        :key="index"
                        @click="handleClickList('0' + (index+1), item)"
                    >
                        <div class="name" :class="{ active: '0' + (index + 1)== currentIndex }">{{ item.name || item.title }}</div>
                    </div>
                </el-scrollbar>

                <div class="fold-menu" @click="handleClickFold"></div>

            </div>
        </div>

        <div class="right-card"  :class="{ fold: isUnfold }">

            <div 
                class="village-list" 
                v-for="(v, i) in otherData"
                :key="i"
            >
                <div class="card-title"><img :src="otherIcon[i]">{{ typeData[i+1] ? typeData[i+1].itemText : '' }}</div>

                <el-scrollbar class="list-wrap" v-if="(otherData[i] && otherData[i].length)"> 
                    <!-- <div class="item towns flex-between" @click="handleClickList((i+1) + '0')">
                        <div class="name" :class="{ active: currentIndex == ( (i+1) + '0' )}">全景预览</div>
                    </div> -->
                    <div 
                        class="item flex-between"
                        v-for="(item, index) in otherData[i]"
                        :key="index"
                        @click="handleClickList((i+1) +''+ index+1, item)"
                    >
                        <div class="name" :class="{ active: (i+1) + '' + (index+1) == currentIndex }">{{ item.name || item.title }}</div>
                    </div>
                </el-scrollbar>

            </div>

        </div>

        <div class="shadow left-shadow" :class="{ fold: isUnfold }"></div>
        <div class="shadow right-shadow" :class="{ fold: isUnfold }"></div>

    </div>

    <!-- 地图 -->
    <xz-map ref="xzMap"></xz-map>

</template>

<style lang="less" scoped>
    .travel-wrap{
        .shadow{
            width: 450px;
        }
        .left-card, .right-card{
            width: 338px;
            transition: all .3s;

            &.fold{
                left: -339px;

                .fold-menu{
                    transform: rotate(180deg);
                }
            }

            &.right-card {
                &.fold{
                    left: auto;
                    right: -339px;
                }
                .village-list{
                    height: 270px;

                    .list-wrap{
                        height: 230px;
                    }
                }
            }
            
            .village-list{
                height: 840px;
                position: relative;


                .list-wrap{
                    height: 770px;
                    margin-top: 30px;

                    .item{
                        margin-bottom: 24px;
                        color: #fff;
                        margin-left: 40px;
                        cursor: pointer;

                        &.towns{
                            margin-left: 30px;
                            
                            span{
                                margin-right: 38px;
                            }
                        }

                        & .active, &:hover .name{
                            color:#00E7FF;
                        }

                        .name{
                            font-size: 18px;

                            &.active{
                                color: #00E7FF;
                                font-size: 22px;
                                font-weight: bold;
                            }
                        }
                    }
                }
            }

            .fold-menu{
                position: absolute;
                top: 50%;
                right: -20px;
                margin-top: -39px;
                width: 40px;
                height: 78px;
                background: rgba(0, 0, 0, 0.6) url('../../assets/images/fold-menu.png') center no-repeat;
                cursor: pointer;
            }

        }
    }
</style>